<template>
    <view class="vip">
        <img src="../static/system/vip.png" alt="">
        <view class="type_btn">
            <view class="title">{{ params.vip_grade_text }}</view>
            <u-button class="btn" :text="params.btn_text"></u-button>
        </view>
        <view class="status">{{ params.vip_status }}</view>
        <view class="bottom">
            <view class="item">
                已登录/<span>{{ params.login_days }}</span>天
            </view>
            <view class="item">
                累计充值/<span>{{ params.total_amount }}</span>元
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
interface props_vip {
    params: {
        vip_grade_text: String,
        btn_text: String,
        vip_status: String,
        login_days: Number,
        total_amount: Number
    }
}

const props = withDefaults(defineProps<props_vip>(), {
})
</script>

<style lang="scss" scoped>
.vip {
    width: calc(100% - 55.5rpx - 66.6rpx);
    height: 226.15rpx;
    margin: 0 27.75rpx;
    background-color: #b5d9d4;
    border-radius: 10rpx;
    box-shadow: 0 4px 8px 0 rgba(32, 154, 137, 0.2), 0 6px 20px 0 rgba(32, 154, 137, 0.19);
    padding: 33.3rpx;
    position: relative;

    img {
        position: absolute;
        height: 231.75rpx;
        left: 27.75rpx;
        top: 27.75rpx;
        z-index: 1;
    }

    .type_btn {
        width: 100%;

        .title {
            float: left;
            font-size: 48.1rpx;
            font-weight: bold;
            line-height: 62.9rpx;
            position: relative;
            z-index: 10;
        }

        .btn {
            float: right;
            height: 62.9rpx;
            width: 148rpx;
            border-radius: 31.45rpx;
            background-color: #209a89;
            color: #FFF;
            border-color: #209a89;
        }
    }

    .status {
        clear: both;
        width: 100%;
        font-size: 27.75rpx;
        margin-top: 18.5rpx;
        position: relative;
        z-index: 10;
    }

    .bottom {
        position: absolute;
        left: 33.3rpx;
        bottom: 33.3rpx;
        width: calc(100% - 66.6rpx);
        height: auto;
        display: flex;
        justify-content: space-between;
        z-index: 10;

        .item {
            width: 50%;
            font-size: 29.6rpx;

            span {
                font-size: 44.4rpx;
                font-weight: bold;
            }
        }
    }
}
</style>